<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="按钮" @click="list()">
    <ul>
        <li v-for="user in arr">{{user.username}}-{{user.nick}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let vm =new Vue({
        el:"div",
        data:{
            arr:[]
        },
        methods:{
            list:function () {
                axios.get("/select").then(function (response) {
                    //服务器给客户端返回数据时，如果时复杂数据会将对象或集合转成Json格式的字符串，axios框架接收到这样的
                    //字符串后会自动转成JavaScript语言中的数组或对象（java中是集合
                    // JS得到的就是数组，java中是对象，JS得到的也是对象）
                    // alert(response.data);
                    vm.arr=response.data;
                })
            }
        }
    })
</script>
</body>
</html>